<template>
  <div>
    <slot
      name="tableAction"
      :options="options"
      :currentChoiceOption="currentChoiceOption"
      :choice="choice"
      :query="query"
      :actions="actions">
      <div class="handle-box" v-show="actions.select">
        <slot name="tableActionPrefix"></slot>
        <el-select v-model="choice" placeholder="搜索类型" clearable @change="clearQuery">
          <el-option v-for="(option, property) in options" :key="property" :value="property" :label="option.label" />
        </el-select>
        <el-input
          class="value"
          v-if="!currentChoiceOption || currentChoiceOption.type === 'value'"
          v-model="query[choice]"
          :disabled="!currentChoiceOption"
          placeholder="关键词"
          clearable />
        <el-radio-group
          class="binary-category"
          v-else-if="currentChoiceOption.type === 'binary-category'"
          v-model="query[choice]">
          <el-radio v-for="item in currentChoiceOption.mappings" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
        <el-select
          class="category"
          v-else-if="currentChoiceOption.type === 'category'"
          v-model="query[choice]"
          placeholder="请选择"
          clearable>
          <el-option
            v-for="item in currentChoiceOption.mappings"
            :key="item.label"
            :label="item.label"
            :value="item.value" />
        </el-select>
        <el-date-picker
          v-else
          v-model="query[choice]"
          type="datetimerange"
          clearable
          range-separator="至"
          start-placeholder="开始日期时间"
          end-placeholder="结束日期时间" />
        <el-button type="primary" :icon="icons.Search" @click="select">搜索</el-button>
        <slot name="tableActionSuffix"></slot>
      </div>
    </slot>
    <el-table
      class="el-table-font"
      border
      stripe
      :header-cell-style="
        () => ({
          'text-align': 'center',
          color: 'black',
          'font-size': '14px',
        })
      "
      :data="tableControl.tableData"
      v-loading="tableControl.loading"
      @sort-change="setSort"
      ref="elTableRef">
      <slot name="tableColumn">
        <el-table-column
          v-for="(option, property) in options"
          :key="property"
          :property="property"
          :label="option.label"
          sortable="custom"
          align="center"
          :width="option.type === 'time' ? 220 : null">
          <template #default="{ row }">
            <slot :name="property" :option="option" :row="row">
              <template v-if="option.type === 'value'">
                <span>
                  {{ option.format ? option.format(row[property]) : row[property] }}
                </span>
              </template>
              <template v-else-if="option.type === 'binary-category'">
                <span>
                  {{ option.format(row[property]) }}
                </span>
              </template>
              <template v-else-if="option.type === 'category'">
                <span>
                  {{ option.format(row[property]) }}
                </span>
              </template>
              <template v-else-if="option.type === 'time'">
                <span>
                  {{ option.format(row[property]) }}
                </span>
              </template>
            </slot>
          </template>
        </el-table-column>
      </slot>
      <slot name="tableColumnAction" :actions="actions">
        <el-table-column
          fixed="right"
          v-if="id !== undefined && (actions.insert || actions.update || actions.delete || actions.otherForRow)"
          label="操作"
          align="center">
          <template #default="{ row }">
            <div v-if="row.readOnly">
              <slot name="tableColumnActionOnReadOnlyPrefix" :actions="actions" :row="row"></slot>
              <el-switch v-model="row.enabled" disabled></el-switch>
              <slot name="tableColumnActionOnReadOnlySuffix" :actions="actions" :row="row"></slot>
            </div>
            <div v-else>
              <slot name="tableColumnActionOnNormalPrefix" :actions="actions" :row="row"></slot>
              <el-switch v-model="row.enabled" active-color="#13ce66" @change="handleEnabled(row.id, $event)" />
              <slot name="tableColumnActionOnNormalSuffix" :actions="actions" :row="row"></slot>
            </div>
          </template>
        </el-table-column>
      </slot>
    </el-table>
    <div :class="{ hidden: pageControl.total <= 5 }" class="pagination-container">
      <el-pagination
        :page-sizes="[5, 10, 25, 50, 100]"
        :page-size="pageControl.pageSize"
        :background="true"
        layout="sizes, prev, pager, next, jumper"
        :total="pageControl.total"
        :current-page="pageControl.current"
        @current-change="setCurrent"
        @size-change="setPageSize"
        @prev-click="setCurrent"
        @next-click="setCurrent"></el-pagination>
    </div>
  </div>
</template>

<script>
  import associationTable from './model';

  export default associationTable;
</script>

<style lang="scss" scoped>
  .handle-box {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .value {
      flex-basis: 220px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .binary-category {
      @extend .value;
      line-height: 40px;
    }

    .category {
      @extend .value;
    }

    .el-date-editor {
      flex-basis: 400px;
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  .user-avatar img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .el-table-font {
    width: 100%;
    font-size: 14px;

    .el-date-editor {
      width: 100%;
      min-width: 200px;
    }

    .save {
      color: #67c23a;
    }

    .edit {
    }

    .delete {
      color: #ff0000;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;

    .hidden {
      display: none;
    }
  }
</style>
